/*
 * @PageName:
 * @Description: 监听元素高度变化自定义指令
 * @FilePath: /glm_frontend/src/directive/common/resizeObserver.js
 */

/**
 * @description: 给需要变化高度的dom绑定setHeight id名
 * @event:
 * @param: extra: 额外高度
 * @param: withoutPagination: 是否去掉分页高度
 * @return {*}
 */

export default {
	beforeMount: (el, binding, vnode) => {
		function setHeight() {
			const tableEl = document.getElementById('setHeight')
			// 元素距离窗口顶部的高度
			const top = tableEl.getBoundingClientRect().top
			const bottom = binding?.value?.extra || 0 + (binding?.value?.withoutPagination ? 110 : 190)
			// 窗口高度
			const pageHeight = window.innerHeight
			tableEl.style.height = pageHeight - top - bottom + 'px'
			tableEl.style.overflowY = 'auto'
		}

		el._vue_resize_observer_ = new ResizeObserver(setHeight)
		el._vue_resize_observer_.observe(el)
	},
	updated(el, binding) {
		// 在更新时重新绑定回调函数
		if (binding.value !== binding.oldValue) {
			el._vue_resize_observer_.disconnect()
			el._vue_resize_observer_.observe(el)
		}
	},

	unmounted(el) {
		el._vue_resize_observer_.disconnect()
		delete el._vue_resize_observer_
	}
}
